<template>
  <div>
    <div class="BannerStatus-Header">基本信息</div>
    <div class="BannerStatus-from">
      <el-form :rules="rules">
        <el-form-item label="banner图:" prop="imgs">
          <div class="uploadBox">
            <div class="box-left">
              <img src="" alt="" />
            </div>
            <div class="box-right">
              <el-upload
                :on-change="uploadStatus()"
                :action="BASEURL + '/public/img'"
                :headers="{
                  Authorization: 'Bearer ' + $store.state.user.remember_token
                }"
                :show-file-list="false"
              >
                <div class="addBox">
                  <el-button size="small">+ 点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    PC端1920*575像素或4:1，移动端750*422像素或16:9；支持PNG、JPG，小于5M
                  </div>
                </div>
              </el-upload>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { BASEURL } from '../../../api'
export default {
  data() {
    return {
      BASEURL,
      from: {
        // 链接地址
        LinkAddress: '',
        // banner图地址
        banner_img: '',
        // 客户端类型(1为PC端，2为移动端)
        client_type: 1,
        // 课程
        course: {},
        // 链接类型
        link_type: '0',
        // 新的
        new: {},
        // 排序
        sort: 1
      },
      rules: {
        imgs: [{ required: true }]
      }
    }
  },
  methods: {
    uploadStatus(res) {
      console.log(res)
    }
  }
}
</script>
<style lang="scss">
.BannerStatus-Header {
  border-left: 2px solid blue;
  box-sizing: border-box;
  padding-left: 5px;
}
.BannerStatus-from {
  .el-upload {
    text-align: justify;
  }
}
.uploadBox {
  display: flex;
  justify-content: flex-start;
  .Box-left {
    img {
      width: 70px;
      height: 36px;
    }
  }
}
</style>
